import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:xiaomi_shop/app/services/screenAdapter.dart';
import 'package:xiaomi_shop/app/services/xhttp.dart';

import '../controllers/search_controller.dart' as shop;

class SearchView extends GetView<shop.SearchController> {
  const SearchView({Key? key}) : super(key: key);
  // 搜索
  PreferredSizeWidget? _appBar() {
    return AppBar(
      title: Container(
        height: ScreenAdapter.height(100),
        alignment: Alignment.center,
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(ScreenAdapter.height(50))),
        child: TextField(
          controller: controller.textEditingController,
          textInputAction: TextInputAction.search,
          textAlignVertical: TextAlignVertical.bottom,
          autofocus: true,
          onChanged: (value) {
            controller.keyword = value;
          },
          onSubmitted: (value) {
            if (value.isNotEmpty) {
              controller.addSearchHistory();
              Get.toNamed('/shop', parameters: {"search": value});
            } else {
              Toast.show("请输入想要搜索的内容");
            }
          },
          decoration: InputDecoration(
              hintText: "手机",
              prefixIcon: const Icon(
                Icons.search,
                color: Colors.black45,
              ),
              enabledBorder: OutlineInputBorder(
                  borderSide: const BorderSide(color: Colors.white, width: 1.0),
                  borderRadius: BorderRadius.all(
                      Radius.circular(ScreenAdapter.height(50)))),
              focusedBorder: OutlineInputBorder(
                  borderSide: const BorderSide(color: Colors.white, width: 1.0),
                  borderRadius: BorderRadius.all(
                      Radius.circular(ScreenAdapter.height(50))))),
        ),
      ),
      centerTitle: true,
      titleSpacing: ScreenAdapter.width(0),
      actions: [
        TextButton(
            onPressed: () {
              if (controller.keyword.isNotEmpty) {
                controller.addSearchHistory();
                Get.toNamed('/shop',
                    parameters: {"search": controller.keyword});
              } else {
                Toast.show("请输入想要搜索的内容");
              }
            },
            child: const Text(
              "搜索",
              style: TextStyle(color: Colors.black),
            ))
      ],
      backgroundColor: const Color.fromRGBO(246, 246, 246, 1),
      scrolledUnderElevation: 0,
    );
  }

  _searchHistory() {
    return Obx(() => Wrap(
          spacing: ScreenAdapter.width(30),
          runSpacing: ScreenAdapter.width(30),
          children: controller.searchHistoryList.value.map((value) {
            return ElevatedButton(
                style: ButtonStyle(
                    backgroundColor:
                        const MaterialStatePropertyAll(Colors.white),
                    foregroundColor:
                        const MaterialStatePropertyAll(Colors.black),
                    surfaceTintColor:
                        const MaterialStatePropertyAll(Colors.white),
                    shadowColor: const MaterialStatePropertyAll(Colors.white),
                    elevation: const MaterialStatePropertyAll(0),
                    padding: MaterialStatePropertyAll(
                      EdgeInsets.fromLTRB(
                          ScreenAdapter.width(20),
                          ScreenAdapter.height(10),
                          ScreenAdapter.width(20),
                          ScreenAdapter.height(10)),
                    ),
                    shape: MaterialStatePropertyAll(RoundedRectangleBorder(
                        borderRadius:
                            BorderRadius.circular(ScreenAdapter.height(20))))),
                onPressed: () {
                  controller.textEditingController.text = value;
                  controller.keyword = value;
                },
                child: Text(
                  value,
                  style: TextStyle(fontSize: ScreenAdapter.fontSize(36)),
                ));
          }).toList(),
        ));
  }

  _guessLike() {
    return Wrap(
      spacing: ScreenAdapter.width(30),
      runSpacing: ScreenAdapter.width(30),
      children: controller.guestLikeList.map((value) {
        return ElevatedButton(
            style: ButtonStyle(
                backgroundColor: const MaterialStatePropertyAll(Colors.white),
                foregroundColor: const MaterialStatePropertyAll(Colors.black),
                surfaceTintColor: const MaterialStatePropertyAll(Colors.white),
                shadowColor: const MaterialStatePropertyAll(Colors.white),
                elevation: const MaterialStatePropertyAll(0),
                padding: MaterialStatePropertyAll(
                  EdgeInsets.fromLTRB(
                      ScreenAdapter.width(20),
                      ScreenAdapter.height(10),
                      ScreenAdapter.width(20),
                      ScreenAdapter.height(10)),
                ),
                shape: MaterialStatePropertyAll(RoundedRectangleBorder(
                    borderRadius:
                        BorderRadius.circular(ScreenAdapter.height(20))))),
            onPressed: () {
              controller.textEditingController.text = value;
              controller.keyword = value;
            },
            child: Text(
              value,
              style: TextStyle(fontSize: ScreenAdapter.fontSize(36)),
            ));
      }).toList(),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: const Color.fromRGBO(246, 246, 246, 1),
        appBar: _appBar(),
        body: ListView(
          padding: EdgeInsets.all(ScreenAdapter.width(40)),
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  "搜索历史",
                  style: TextStyle(
                      fontSize: ScreenAdapter.fontSize(40),
                      fontWeight: FontWeight.bold),
                ),
                IconButton(
                    onPressed: () {
                      Get.defaultDialog(
                        title: "温馨提示",
                        middleText: "您确定要删除搜索历史记录？",
                        textCancel: "取消",
                        textConfirm: "确定",
                        onCancel: () {},
                        onConfirm: () {
                          controller.cleanSearchHistory();
                          Get.back();
                        },
                      );
                    },
                    icon: const Icon(Icons.delete_forever_outlined))
              ],
            ),
            _searchHistory(),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  "猜你喜欢",
                  style: TextStyle(
                      fontSize: ScreenAdapter.fontSize(40),
                      fontWeight: FontWeight.bold),
                ),
                IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.refresh_outlined),
                ),
              ],
            ),
            _guessLike(),
            Container(
              margin: EdgeInsets.only(top: ScreenAdapter.height(40)),
              height: ScreenAdapter.height(1000),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(ScreenAdapter.height(20)),
              ),
              child: Column(
                children: [
                  SizedBox(
                    width: double.infinity,
                    child: Image.asset(
                      'assets/images/hot_search.png',
                      fit: BoxFit.fill,
                    ),
                  ),
                  Expanded(
                      child: GridView.builder(
                    padding: EdgeInsets.fromLTRB(ScreenAdapter.width(40), 0,
                        ScreenAdapter.width(40), ScreenAdapter.width(40)),
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2,
                        mainAxisSpacing: ScreenAdapter.width(20),
                        crossAxisSpacing: ScreenAdapter.width(40),
                        childAspectRatio: 3 / 1),
                    itemCount: 10,
                    shrinkWrap: true,
                    itemBuilder: (context, index) {
                      return Container(
                        padding: EdgeInsets.all(ScreenAdapter.width(20)),
                        child: Row(children: [
                          Image.network(
                              "https://www.itying.com/images/shouji.png"),
                          SizedBox(
                            width: ScreenAdapter.width(20),
                          ),
                          const Expanded(
                              child: Text(
                            "K50 至尊机皇 晓龙0800",
                            maxLines: 2,
                          ))
                        ]),
                      );
                    },
                  ))
                ],
              ),
            )
          ],
        ));
  }
}
